<template>
  <el-card>
    <div class="allodetail">
      <h3 class="applyRecode">订单详情</h3>
      <el-form class="form" :model="form" ref="form" label-width="120px">
        <div class="left">
          <el-form-item class="dates" label="订单ID：">{{form.orid}}</el-form-item>
          <el-form-item class="dates" label="下单人：">{{form.sender}}</el-form-item>
          <el-form-item class="dates" label="状态：">{{form.status}}</el-form-item>
          <el-form-item class="dates" label="下单时间：">{{form.sendtime}}</el-form-item>
          <el-form-item class="dates" label="留言：">{{form.words}}</el-form-item>
        </div>
        <div class="you">
          <el-form-item class="dates" label="配送信息：">{{form.message}}</el-form-item>
          <el-form-item class="dates" label="下单手机号：">{{form.phone}}</el-form-item>
          <el-form-item class="dates" label="支付时间：">{{form.paytime}}</el-form-item>
          <el-form-item class="dates" label="订单金额：">{{form.oamount}}</el-form-item>
        </div>
      </el-form>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane class="deta" label="详情" name="first">
          <el-form class="form2" :model="form2" ref="form2" label-width="120px">
            <div class="san">
              <div class="oImg">
                <img src="../../../assets/images/logo.png" alt=""/>
              </div>
              <div class="logs">
                <div class="tit">{{form2.title}}</div>
                <div class="desc">
                  <span>产品类型：{{form2.stype}}</span><span>计量单位：{{form2.unit}}</span>
                </div>
              </div>
              <div class="mounts">x1</div>
            </div>
            <el-form-item class="dates" label="商品总价：">{{form2.sumprice}}</el-form-item>
            <el-form-item class="dates" label="运费：">{{form2.fee}}</el-form-item>
            <el-form-item class="dates" label="扶贫码抵扣：">{{form2.deduction}}</el-form-item>
            <el-form-item class="dates" label="优惠券优惠：">{{form2.sale}}</el-form-item>
            <el-form-item class="dates" label="实付款："><span>{{form2.inpay}}</span></el-form-item>
            <el-form-item class="dates" label="支付方式：">{{form2.paytype}}</el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane class="connect" label="关联订单" name="second">
          <div class="bigimg">
            <img src="../../../assets/images/logo.png" alt=""/>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-card>
</template>
<script>
export default {
  name: 'allodetail',
  data () {
    return {
      activeName: 'first',
      form: {
        orid: '201812185526784534734',
        sender: '小明',
        status: '',
        sendtime: '',
        words: '',
        message: '',
        phone: '',
        paytime: '',
        oamount: ''
      },
      form2: {
        title: '美的家用电器',
        stype: '件',
        unit: 'kg',
        sumprice: '5000积分+¥99.90',
        fee: '¥0.00',
        deduction: '¥0.00',
        sale: '¥0.00',
        inpay: '¥0.00',
        paytype: '支付宝'
      }
    }
  },
  created () {

  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    }
  }
}
</script>
<style lang="scss" scope>
.allodetail {
  .form {
    display: flex;
    .left {
      .el-form-item {
        margin-bottom: 0;
      }
    }
    .you {
      margin-left: 66px;
      .el-form-item {
        margin-bottom: 0;
      }
    }
  }
  .deta {
    .form2 {
      .san {
        display: flex;
        align-items: center;
        padding-left: 18px;
        .oImg {
          width: 95px;
          height: 70px;
          border: 4px solid #ccc;
          margin-right: 30px;
          img {
            //  vertical-align: middle;
            display: block;
            width: 100%;
            height: 100%;
          }
        }
        .logs {
          margin-right: 30px;
          span {
            margin-right: 20px;
          }
        }
      }
      .el-form-item {
        margin-bottom: 0;
        .el-form-item__content {
          margin-left: 150px!important;
          span {
            color: #f00;
          }
        }
      }
    }
  }
  .connect {
    .bigimg {
      width: 440px;
      height: 160px;
      border: 2px solid #ccc;
      img {
        //  vertical-align: middle;
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
